<script setup lang="tsx">
import { reactive, ref, unref } from 'vue'
import { getRoleListApi, SearchRoleMenuAndButtonsApi, AddRoleMenuButtonsApi } from '@/api/role'
import { ContentWrap } from '@/components/ContentWrap'
import {
  ElTabs,
  ElTabPane,
  ElDescriptions,
  ElDescriptionsItem,
  ElButton,
  ElMessage,
  ElCheckbox
} from 'element-plus'
interface RoleListItem {
  name: string
  guid: string
}
let roleGuid = ''
const roleList = ref<RoleListItem[]>([])
const getRoleList = async () => {
  const res = await getRoleListApi({})
  roleList.value = res.data.pageModels
  roleGuid = res.data.pageModels[0].guid
  searchRoleMenuAndButtons(roleGuid)
}
getRoleList()
interface MenuBtn {
  menuButtons: Array<MenuBtnItem>
  menuGuid: string
  menuName: string
}
interface MenuBtnItem {
  name: string
  menuGuid: string
  isChecked: boolean
  guid: string
}

let pButtons = ref<MenuBtn[]>([])
const searchRoleMenuAndButtons = async (roleGuid: string) => {
  const res = await SearchRoleMenuAndButtonsApi({ roleGuid })
  let arr: MenuBtn[] = []
  if (res.data?.menuButtons) {
    res.data?.menuButtons.map((item) => {
      if (item.menuButtons.length > 0) {
        let btns = item.menuButtons
        if (item.checkedButtons.length > 0) {
          item.checkedButtons.map((checkBtn) => {
            let index = btns.findIndex((b) => b.name == checkBtn)
            if (index > -1) {
              btns[index].isChecked = true
            }
          })
        }
        arr.push(item)
      }
    })
    pButtons.value = arr
  } else {
    ElMessage.error('获取权限失败')
  }
}
const isAll = ref(false)
const tabChangeTap = (index) => {
  roleGuid = roleList.value[index].guid
  isAll.value = false
  searchRoleMenuAndButtons(roleGuid)
}

const allChecked = () => {
  isAll.value = !isAll.value
  pButtons.value.map((item) => {
    item.menuButtons.map((btn) => {
      btn.isChecked = isAll.value
    })
  })
}
const save = async () => {
  console.log(pButtons)
  let arr: MenuBtn[] = []
  pButtons.value.map((item) => {
    let menuButtons: MenuBtnItem[] = []
    item.menuButtons.map((btn) => {
      if (btn.isChecked) {
        console.log(btn)
        menuButtons.push(btn)
      }
    })
    arr.push({
      menuButtons: menuButtons,
      menuGuid: item.menuGuid,
      menuName: item.menuName
    })
  })
  const res = await AddRoleMenuButtonsApi({ guid: roleGuid, menuButtons: arr })

  ElMessage.success('保存成功')
}
</script>

<template>
  <ContentWrap title="权限管理">
    <el-tabs tab-position="left" @tab-change="tabChangeTap">
      <el-tab-pane :label="item.name" v-for="item in roleList" :key="item.guid" />
      <el-descriptions size="small" :column="1" :border="true" direction="vertical">
        <template #extra>
          <el-button type="primary" @click="allChecked">{{
            isAll ? '取消全选' : '全选'
          }}</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </template>

        <el-descriptions-item
          v-for="btn in pButtons"
          :key="btn.menuName"
          :label="btn.menuName"
          label-class-name="desc-label"
        >
          <el-checkbox
            v-for="pbtn in btn.menuButtons"
            :key="pbtn.menuGuid"
            :label="pbtn.name"
            v-model="pbtn.isChecked"
            size="large"
          />
        </el-descriptions-item>
      </el-descriptions>
    </el-tabs>
  </ContentWrap>
</template>
<style scoped>
:deep(.el-descriptions__body) {
  height: 640px;
  overflow-y: scroll;
}
</style>
